<template>
  <div class="child-drawer-detail">
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerStatus"
      :direction="direction"
      :before-close="handleClose"
      size="928px"
    >
      <div class="drawer-detail-table">
        <el-table
          ref="tableDetailHeight"
          :data="drawerTableData"
          border
          style="width: 100%"
          v-loading="drawerTableLoading"
          :height="drawerTableMaxHeight"
        >
          <el-table-column type="index" width="50" align="center" label="序号">
          </el-table-column>
          <el-table-column
            prop="invCode"
            label="物料编码"
            align="center"
            width="110"
          >
          </el-table-column>
          <el-table-column label="物料名称" align="center">
            <template v-slot="scope">
              <div>
                <span
                  >{{ scope.row.invName }} {{ scope.row.invAttribute }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="unitName"
            label="主计量"
            align="center"
            width="80"
          >
          </el-table-column>
          <el-table-column label="需求量" align="center" width="120">
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="可用量" align="center" width="120">
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.wm_quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="领用量" align="center" width="120">
            <template v-slot="scope">
              <div style="text-align: right">
                <span>{{ scope.row.wi_quantity }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="invSupplyTypeCn"
            label="供应方式"
            align="center"
            width="80"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listMpMbom, dictMatching, billParameters } from "../../api/order";
import { Translate } from "../../utils/plan";
//并行请求
import axios from "axios";

export default {
  data() {
    return {
      optionsinvSupplyType: [],
      //抽屉
      isDrawer: null,
      direction: "rtl",
      drawerData: null,
      drawerTableData: [],
      drawerTableLoading: true,
      drawerTableKey: "",
      drawerTableMaxHeight: null,
      drawerStatus: false,
      //配置
      decimalQuantity: "2",
    };
  },
  props: {
    drawerTitle: {
      type: String,
      default: "",
    },
    drawerCode: {
      type: String,
      default: "",
    },
    fmMbomConfig: {
      type: String,
      default: "",
    },
    drawerType: {
      type: String,
      default: "",
    },
  },

  created() {
    setTimeout(() => {
      this.drawerStatus = true;
    }, 0);
    console.log(this.fmMbomConfig);
    this.getDictionaryType().then(() => {
      this.handleDawer(this.drawerCode);
    });
  },

  methods: {
    //字典与配置
    getDictionaryType() {
      const self = this;
      return new Promise((resolve) => {
        //并行请求
        axios
          .all([
            //查询销售订单号
            dictMatching("inv_supply_type"),
            //查询配置
            billParameters({
              formPath: self.fmMbomConfig,
            }),
          ])
          .then(
            axios.spread(function (resSupplyType, resConfig) {
              if (resSupplyType.code == 200 && resConfig.code == 200) {
                self.optionsinvSupplyType = resSupplyType.data;
                self.decimalQuantity = resConfig.data["precision.quantity"];
                resolve();
              }
            })
          );
      });
    },
    //数据
    handleDawer(code) {
      this.drawerTableLoading = true;
      let query = null;
      if (this.drawerType == "detail") {
        query = {
          mpOrderCode: code,
          mpCode: "",
        };
      } else {
        query = {
          mpCode: code,
          mpOrderCode: "",
        };
      }
      listMpMbom(query).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            Translate(
              res.data,
              this.optionsinvSupplyType,
              "invSupplyType",
              "invSupplyTypeCn"
            ).then((data) => {
              this.drawerTableData = data;
              this.getDecimal();
            });
          } else {
            this.drawerTableData = [];
          }

          this.drawerTableMaxHeight =
            `${document.documentElement.clientHeight}` - 180;
          this.drawerTableLoading = false;
        }
      });
    },

    //关闭
    handleClose() {
      this.$emit("drawerMpCodeClose");
    },

    //格式化数量单价金额小数位数
    getDecimal() {
      if (this.drawerTableData.length > 0) {
        let decimalQuantity = parseInt(this.decimalQuantity);
        this.drawerTableData.forEach((item) => {
          if (item.quantity !== null && item.quantity !== undefined) {
            item.quantity = parseFloat(item.quantity).toFixed(decimalQuantity);
          }
          if (item.wm_quantity !== null && item.wm_quantity !== undefined) {
            item.wm_quantity = parseFloat(item.wm_quantity).toFixed(
              decimalQuantity
            );
          }
          if (item.wi_quantity !== null && item.wi_quantity !== undefined) {
            item.wi_quantity = parseFloat(item.wi_quantity).toFixed(
              decimalQuantity
            );
          }
        });
      }
    },
  },

  watch: {
    drawerCode: {
      handler() {
        this.getDictionaryType().then(() => {
          this.handleDawer(this.drawerCode);
        });
      },
    },
  },
};
</script>
<style lang="scss">
.child-drawer-detail {
  width: 928px;
  overflow: hidden;
  .el-drawer__wrapper {
    width: 958px !important;
    left: inherit;
  }
  .el-drawer.rtl {
    height: calc(100vh - 85px);
    top: auto;
  }
  .el-tabs__header {
    margin: 0 0 8px;
  }
  .el-drawer__header {
    span {
      color: #333;
      font-size: 16px;
    }

    margin-bottom: 12px;
  }

  .drawer-detail-table {
    padding: 0 15px;
  }

  .drawer-list-box {
    padding: 0 15px 0 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .drawer-content {
      p {
        margin: 5px 0px 0px 0;
        label {
          font-size: 14px;
          color: #999;
          width: 70px;
          display: inline-block;
          font-weight: normal;
        }

        .la-width {
          width: 43px !important;
        }

        span {
          font-size: 14px;
          flex: 1;
        }
      }
      .drawer-box {
        .awer-l {
          float: left;
          width: 45%;
        }
        .content-t {
          display: flex;
        }
        .awer-r {
          float: left;
          width: 54%;
          margin-left: 1%;
          .con-price {
            p {
              display: flex;
              align-items: center;
              margin-right: 20px;
            }
          }

          .con-height {
            p {
              display: flex;
              height: 36px;
              span {
                // height: 40px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
    }

    .drawer-number {
      flex: 0 1 20% !important;

      tr td:nth-of-type(1) {
        width: 50% !important;
      }
    }

    .drawer-table {
      flex: 0 1 80%;
      margin-left: 15px;
      position: relative;
      .drawer-next {
        position: absolute;
        right: 0;
        font-size: 14px;
        top: 12px;
        z-index: 8;
      }
    }
    .order-tab .is-disabled .el-textarea__inner {
      background: none;
      height: 90px;
    }
    .inv-table {
      flex: 0 1 58%;
    }

    h2 {
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 5px;
      margin-left: 10px;
    }

    .box-bottom {
      margin-bottom: 15px;
    }

    p {
      margin: 8px 0;
      font-size: 15px;
    }

    .table-border {
      background-color: #f7f7f8;
      border-radius: 5px;
      padding: 8px 0;
      min-height: 110px;
    }

    table {
      width: 100%;

      td {
        text-align: left;
        padding: 2px 10px;
        font-size: 14px;
        // width: 50%;
      }

      tr td:nth-of-type(1) {
        color: #999;
      }
    }

    .table-left {
      tr td:nth-of-type(1) {
        width: 18%;
      }
    }

    .table-right {
      tr td:nth-of-type(1) {
        width: 20%;
      }
    }
  }
}
</style>
